import { Color, Matrix4, Vector3, Quaternion } from 'https://unpkg.com/three/build/three.module.js';
import { initShaders, ScaleLinear, imgPromise } from '../jsm/Utils.js';
import lib from '../jsm/ThreeLib.js';
import Poly from '../jsm/Poly3.js'
import Sky from '../jsm/Sky.js'
import ShapeGeo from '../jsm/ShapeGeo.js';
import ImageJump from '../jsm/ImageJump.js'

window.onload = function () {

    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;


    const gl = canvas.getContext("webgl");
    //开启颜色合成,才会有透明度的感觉
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    //开始背景遮挡
    gl.enable(gl.DEPTH_TEST);

    //初始化着色器
    initShaders(gl,
        document.querySelector("#vertexShader").innerText,
        document.querySelector("#fragmentShader").innerText);
    lib.clearCanvas(gl, new Color("rgba(1,1,1,1)"), 1);


    let max = 1;
    // let allArr = [
    //     -0.5, -0.8, 10, 0, 0,
    //     -0.5, 0.8, 10, 0, max,
    //     0.5, -0.8, 10, max, 0,
    //     0.5, 0.8, 10, max, max,
    // ];
    // let allArr = [
    //     -0.5, -0.8, 10, 0, max,
    //     -0.5, 0.8, 10, max, max,
    //     0.5, -0.8, 10, 0, 0,
    //     0.5, 0.8, 10, max, 0,
    // ];

    let mm4 = new Matrix4();

    const u_Sampler = new Image();
    u_Sampler.src = '../Images/Image01.png';



    Promise.all([
        imgPromise(u_Sampler),
    ]).then(() => {

        let x = 0.3;
        let y = lib.getImageCentre(x, u_Sampler.width / u_Sampler.height);

        let allArr = [
            -x, -y, 10, 0, 0,
            -x, y, 10, 0, max,
            x, -y, 10, max, 0,
            x, y, 10, max, max,
        ];


        let poly = new Poly({
            gl: gl,
            arr: allArr,
            list: [
                { name: 'a_Position', size: 2, beginIndex: 0 },
                { name: 'a_PointSize', size: 1, beginIndex: 2 },
                { name: 'a_Pin', size: 2, beginIndex: 3 },
            ],
            uniforms: {
                'u_ModelMatrix': {
                    type: 'uniformMatrix4fv',
                    value: mm4.elements
                }
            }
        });

        poly.texture = {
            'u_Sampler': {
                image: u_Sampler,
                WRAP_W: gl.CLAMP_TO_EDGE,
                WRAP_H: gl.CLAMP_TO_EDGE,
            }
        };


        poly.updateTexture();
        poly.draw(["TRIANGLE_STRIP"]);


    });







};
